<template>
  <div class="button-group">
    <!-- 只展示本页面有的 -->
    <div v-for="(button, index) in buttonList" :key="index">
      <el-button
        v-if="!button.upload"
        :key="index"
        :class="['gbutton', button.type]"
        link
        @click="button.onClick"
        :title="button.label"
      >
        <el-icon v-if="button.icon" class="elbutton_icon">
          <component :is="getIconComponent(button.icon)" class="button_icon" />
        </el-icon>
      </el-button>
      <el-upload
        :show-file-list="false"
        :auto-upload="false"
        ref="uploadRef"
        :on-change="(file) => onFileChange(file, button.onChange)"
        :limit="button.limit"
        accept=".xsl, .xlsx"
        v-if="button.upload"
      >
        <el-button
          :icon="getIconComponent(button.icon)"
          :title="button.label"
          link
          :class="['gbutton', 'chooseFile', button.type]"
        ></el-button>
      </el-upload>
    </div>
    <!-- 展示全部，不可用则置灰 -->
    <!-- <div v-for="(button, index) in handledButtons" :key="index">
      <el-button
        v-if="!button.upload"
        :key="index"
        :class="['gbutton', button.type]"
        link
        @click="button.onClick"
        :title="button.label"
        :disabled="button.disabled"
      >
        <el-icon v-if="button.icon" class="elbutton_icon">
          <component :is="getIconComponent(button.icon)" class="button_icon" />
        </el-icon>
      </el-button>
      <el-upload
        :show-file-list="false"
        :auto-upload="false"
        ref="uploadRef"
        :on-change="(file) => onFileChange(file, button.onChange)"
        :limit="button.limit"
        accept=".xsl, .xlsx"
        v-if="button.upload"
      >
        <el-button
          :icon="getIconComponent(button.icon)"
          :title="button.label"
          link
          :class="['gbutton', 'chooseFile', button.type]"
          :disabled="button.disabled"
        ></el-button>
      </el-upload>
    </div> -->
  </div>
</template>

<script setup>
import { defineProps, onMounted } from "vue";
import { Upload } from "@element-plus/icons-vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// import IconRecycleBin from "@/assets/customIcon/IconRecycleBin.vue";
const customIcons = import.meta.glob("@/assets/customIcon/*.vue", {
  eager: true,
});
// console.log(customIcons);
const customIconsComponent = Object.fromEntries(
  Object.entries(customIcons).map(([path, component]) => {
    const iconName = path.match(/\/customIcon\/(.+)\.vue$/)[1];
    return [iconName, component];
  })
);
// console.log(customIconsComponent);
// 定义 props
const props = defineProps({
  buttonList: {
    type: Array,
    required: true,
    default: () => [], // 默认值为空数组
  },
});
// 提前定义图标顺序
const iconOrder = [];
const IconComponents = {
  ...ElementPlusIconsVue,
  ...customIconsComponent,
};
const getIconComponent = (iconName) => {
  // 处理 Element Plus 的图标命名转换
  if (iconName.startsWith("el-icon-")) {
    // 转换 el-icon-edit 为 Edit
    const componentName = iconName
      .replace("el-icon-", "")
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join("");
    return IconComponents[componentName];
  }
  // 直接返回图标组件
  return IconComponents[iconName]?.default;
};
const uploadRef = ref(null);
const fileData = ref({});
const onFileChange = (e, onChange) => {
  console.log(e, onChange);
  const clearFun = () => {
    uploadRef.value[0].clearFiles();
    fileData.value = null;
  };
  onChange && onChange(e, clearFun);
};
const allButtons = [
  {
    label: "回退",
    icon: "el-icon-back",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "前进",
    icon: "el-icon-right",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "添加",
    icon: "el-icon-CirclePlus",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "下载",
    icon: "el-icon-Download",
    type: "b2",
    onClick: () => {},
  },
  {
    label: "导入",
    icon: "ImportIcon",
    type: "b2",
    upload: true,
    limit: 1,
    ref: "uploadRef",
    onChange: () => {},
  },
  {
    label: "导出",
    icon: "exportIcon",
    type: "b2",
    onClick: () => {},
  },
  {
    label: "刷新",
    icon: "el-icon-refresh",
    type: "b1",
    onClick: (e) => {},
  },
  {
    label: "评论",
    icon: "el-icon-ChatDotRound",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "审批",
    icon: "el-icon-stamp",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "添加知识库",
    icon: "el-icon-Collection",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "添加模板",
    icon: "AddTemplate",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "批量删除",
    icon: "el-icon-delete",
    type: "b1",
    onClick: () => {},
  },
  {
    label: "列表视图切换",
    icon: "FaAlignJustify",
    type: "b1",
    onClick: () => {},
  },
];
const handledButtons = ref([]);
onMounted(() => {
  // 处理数据
  handledButtons.value = allButtons.map((button) => {
    const matchedButton = props.buttonList.find(
      (item) => item.icon === button.icon
    );
    return {
      label: matchedButton?.label || button.label,
      icon: button.icon,
      type: matchedButton?.type || button.type,
      onClick: matchedButton?.onClick || button.onClick,
      disabled: matchedButton ? false : true, // 有则不禁用
    };
  });
});
</script>

<style scoped lang="scss">
.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}
.gbutton {
  justify-content: start;
  & + & {
    margin-left: 0;
  }
}
:deep(.chooseFile) {
  .el-icon {
    width: 20px;
    height: 20px;
    svg {
      width: 100%;
      height: 100%;
      fill: currentcolor; //自定义图标颜色
    }
  }
}
.elbutton_icon {
  // width: 20px;
  font-size: 20px;
  margin: 0 5px;
  svg {
    width: 100%;
    height: 100%;
    fill: currentcolor; //自定义图标颜色
  }
}
</style>
